import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Download } from 'lucide-react';
import { PageHeader, Section, KV, Note } from '@/components/ui/section';
import { Badge, ClaimBadge, ConfidenceBadge } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { JsonView } from '@/components/ui/json-view';
import { BarChart } from '@/components/charts/bar-chart';
import { getMetric, snapshotsForMetric, rankingRows, type Snapshot } from '@/lib/queries/rankings';
import { sourceInfoById } from '@/lib/queries/provenance';
import { fmtDate, fmtDateTime, fmtInt, fmtValue, scopeLabel, unitLabel, humanize } from '@/lib/format';
import { str, type SP } from '@/lib/search-params';

export const dynamic = 'force-dynamic';

export async function generateMetadata({ params }: { params: Promise<{ metric: string }> }): Promise<Metadata> {
  const m = await getMetric((await params).metric);
  return m ? { title: `${m.name} — ranking`, description: m.description } : { title: 'Ranking' };
}

function Delta({ rank, prev }: { rank: number; prev: number | null }) {
  if (prev == null) return <span className="text-ink-4">new</span>;
  const d = prev - rank;
  if (d === 0) return <span className="text-ink-3">=</span>;
  return (
    <span className={d > 0 ? 'text-ok' : 'text-danger'} title={`Previous rank ${prev}`}>
      {d > 0 ? '▲' : '▼'}
      {Math.abs(d)}
    </span>
  );
}

export default async function RankingPage({ params, searchParams }: { params: Promise<{ metric: string }>; searchParams: Promise<SP> }) {
  const { metric: slug } = await params;
  const sp = await searchParams;
  const metric = await getMetric(slug);
  if (!metric) notFound();
  const snapshots = await snapshotsForMetric(slug);
  const wanted = str(sp, 'scope');
  const snap: Snapshot | null = snapshots.find((s) => s.scope_key === wanted) ?? snapshots[0] ?? null;
  const rows = snap ? await rankingRows(snap.id) : [];
  const srcInfo = snap ? await sourceInfoById(snap.source_ids) : new Map();
  const eligibility = Object.entries(metric.eligibility ?? {});
  const isBurden = metric.category === 'burden' || metric.category === 'lethality' || metric.category === 'unmet_need';

  return (
    <div>
      <PageHeader kicker={`Ranking · ${humanize(metric.category)}`} title={metric.name} lede={metric.description}>
        <p className="mt-2 flex flex-wrap items-center gap-2 text-[12.5px] text-ink-3">
          <ClaimBadge kind="computed" />
          <span className="ci-mono">{metric.formula_version}</span>
          <span>unit: {unitLabel(metric.unit)}</span>
          <span>{metric.higher_is_worse == null ? 'higher is first (neutral)' : metric.higher_is_worse ? 'higher = worse' : 'higher = better'}</span>
          <Link href="/rankings" className="ci-link">
            All metrics
          </Link>
        </p>
      </PageHeader>

      {snapshots.length === 0 ? (
        <EmptyState title="Ranking not yet computed" knows={[{ label: 'Metric definition and formula', href: `/methodology#${metric.slug}` }, { label: 'Source registry', href: '/sources' }, { label: 'Other rankings', href: '/rankings' }]}>
          {isBurden
            ? 'This metric depends on epidemiology observations. Global burden data (IARC / GLOBOCAN) is awaiting license review and SEER awaits credentials; no snapshot is produced until licensed observations exist for at least one scope with ten or more top-level cancers.'
            : 'This metric depends on counters that are refreshed after the relevant connector runs (ClinicalTrials.gov, PubMed, CIViC, GDC). No snapshot exists yet on this environment.'}
          <div className="mt-2">
            <span className="ci-kicker mr-2">Formula</span>
            <code className="ci-mono text-[12px]">{metric.formula}</code>
          </div>
        </EmptyState>
      ) : (
        <div className="grid gap-8 lg:grid-cols-[1fr_320px]">
          <div>
            <nav aria-label="Scope" className="mb-3 flex flex-wrap gap-1.5 text-[12.5px]">
              {snapshots.map((s) => (
                <Link key={s.id} href={`/rankings/${slug}?scope=${encodeURIComponent(s.scope_key)}`} aria-current={snap?.id === s.id ? 'page' : undefined} className={`border px-2 py-0.5 no-underline ${snap?.id === s.id ? 'border-accent bg-accent-soft text-accent-2' : 'border-rule text-ink-2 hover:border-accent'}`}>
                  {scopeLabel(s.scope_key)}
                </Link>
              ))}
            </nav>
            {snap && rows.length ? (
              <>
                <BarChart ariaLabel={`Top ${Math.min(15, rows.length)} by ${metric.name}`} unit={metric.unit} data={rows.slice(0, 15).map((r) => ({ label: r.canonical_name, value: r.value, muted: r.confidence === 'LOW' || r.confidence === 'INSUFFICIENT_DATA' }))} />
                <div className="ci-table-wrap mt-4">
                  <table className="ci-table">
                    <thead>
                      <tr>
                        <th className="num">Rank</th>
                        <th className="num">Δ</th>
                        <th>Cancer</th>
                        <th className="num">
                          {metric.name} ({unitLabel(metric.unit)})
                        </th>
                        <th className="num">Percentile</th>
                        <th>Confidence</th>
                        <th>Sources</th>
                        <th>Why #n?</th>
                      </tr>
                    </thead>
                    <tbody>
                      {rows.map((r) => (
                        <tr key={r.id}>
                          <td className="num font-medium">{r.rank}</td>
                          <td className="num">
                            <Delta rank={r.rank} prev={r.previous_rank} />
                          </td>
                          <td className="min-w-[220px]">
                            <Link className="ci-link" href={`/cancer/${r.slug}/rankings`}>
                              {r.canonical_name}
                            </Link>
                          </td>
                          <td className="num">{fmtValue(r.value, r.unit)}</td>
                          <td className="num text-ink-3">{r.percentile}</td>
                          <td>
                            <ConfidenceBadge level={r.confidence} />
                          </td>
                          <td className="text-[11.5px]">
                            {snap.source_ids.map((id) => {
                              const s = srcInfo.get(id);
                              return (
                                <Link key={id} href={`/source/${s?.slug ?? id}`} className="ci-mono mr-1 border border-rule px-1 text-ink-2 no-underline hover:border-accent">
                                  {s?.slug ?? id}
                                </Link>
                              );
                            })}
                          </td>
                          <td>
                            <details>
                              <summary className="ci-link text-[12.5px]">inputs</summary>
                              <div className="mt-1 max-w-[380px]">
                                <JsonView data={r.inputs} />
                                <p className="ci-mono mt-1 text-[10.5px] text-ink-4">ranking row {r.id}</p>
                              </div>
                            </details>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <Freshness dataUpdatedAt={snap.generated_at} extra={`${fmtInt(snap.eligible_entities)} eligible entities · inputs hash ${snap.inputs_hash}`} />
              </>
            ) : (
              <EmptyState compact>This snapshot has no rows.</EmptyState>
            )}
          </div>

          <aside className="space-y-6">
            {snap ? (
              <Section id="methodology" kicker="Methodology" title="How this table was built" level={3}>
                <KV
                  items={[
                    { k: 'Formula', v: <code className="ci-mono text-[12px]">{metric.formula}</code> },
                    { k: 'Version', v: <span className="ci-mono">{snap.formula_version}</span> },
                    { k: 'Scope', v: scopeLabel(snap.scope_key) },
                    { k: 'Scope key', v: <span className="ci-mono break-all text-[11.5px]">{snap.scope_key}</span> },
                    { k: 'Eligible entities', v: <span className="ci-num">{fmtInt(snap.eligible_entities)}</span> },
                    { k: 'Generated', v: fmtDateTime(snap.generated_at) },
                    { k: 'Inputs hash', v: <span className="ci-mono break-all text-[11.5px]">{snap.inputs_hash}</span> },
                    {
                      k: 'Sources',
                      v: snap.source_ids.length
                        ? snap.source_ids.map((id) => {
                            const s = srcInfo.get(id);
                            return (
                              <Link key={id} href={`/source/${s?.slug ?? id}`} className="ci-link mr-2">
                                {s?.name ?? id}
                              </Link>
                            );
                          })
                        : '—',
                    },
                    { k: 'Aggregation', v: metric.aggregation ?? 'none' },
                  ]}
                />
                {eligibility.length ? (
                  <>
                    <p className="ci-kicker mt-3">Eligibility</p>
                    <JsonView data={metric.eligibility} />
                  </>
                ) : null}
                <p className="mt-3 text-[12px] text-ink-3">
                  <Link href={`/methodology#${metric.slug}`} className="ci-link">
                    Full methodology
                  </Link>{' '}
                  · ties share a rank (1, 2, 2, 4) · previous rank refers to the last snapshot of the same scope.
                </p>
                <a href={`/api/export/rankings.csv?metric=${slug}&scope=${encodeURIComponent(snap.scope_key)}`} className="mt-3 inline-flex items-center gap-1.5 border border-rule px-2.5 py-1 text-[13px] text-ink no-underline hover:border-accent hover:text-accent">
                  <Download className="h-3.5 w-3.5" aria-hidden /> Download CSV (with attribution)
                </a>
              </Section>
            ) : null}
            {isBurden ? <Note tone="warn">Burden and lethality metrics depend on registry definitions (site groups, standard population, estimate type). Compare only within one table.</Note> : <Note>Counts of trials, publications and evidence measure registered activity, not disease burden or treatment quality.</Note>}
            {metric.slug.includes('mortality') || metric.slug.includes('survival') ? (
              <p className="text-[12px] text-ink-3">
                <Badge tone="outline">Deadliness</Badge> annual deaths ≠ age-standardized mortality ≠ mortality-to-incidence ratio ≠ 5-year survival. Each answers a different question.
              </p>
            ) : null}
          </aside>
        </div>
      )}
    </div>
  );
}